<template>
  <div>
    <!-- 添加分类 -->
    <el-button
      plain
      @click='showAddCatDialog'
      type='success'
    >添加分类</el-button>
    <!-- 表格 -->
    <el-table
      :data="catData"
      style="width: 100%"
    >
      <!--
        file-icon="icon icon-file"  文件
        folder-icon="icon icon-folder"  文件夹
     -->
      <el-table-tree-column
        file-icon="icon icon-file"
        folder-icon="icon icon-folder"
        prop="cat_name"
        label="分类名称"
        width="180"
        tree-key='cat_id'
        parent-key='cat_pid'
        level-key='cat_level'
        :indent-size='30'
      ></el-table-tree-column>
      <!-- <el-table-column
        prop="cat_name"
        label="分类名称"
        width="180"
      >
      </el-table-column> -->
      <el-table-column
        label="是否有效"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.cat_deleted ? '否' : '是' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="cat_level"
        label="层级"
      >
        <template slot-scope="scope">
          <span v-if='scope.row.cat_level==0'>一级</span>
          <span v-else-if='scope.row.cat_level==1'>二级</span>
          <span v-else>三级</span>

        </template>
      </el-table-column>
    </el-table>

    <!-- 第一个对话框 : 添加分类 -->
    <el-dialog
      title="添加分类"
      :visible.sync="dialogAddCatVisible"
    >
      <el-form
        :model="addCatForm"
        label-width='80px'
      >
        <el-form-item label="分类名称 ">
          <el-input
            v-model="addCatForm.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="父级名称">
          <!-- 级联选择器 -->
          <el-cascader
            v-model='addCatForm.cat_pid_arr'
            :options="options"
            clearable
            :props='defaultProps'
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogAddCatVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addCat"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
/* eslint-disable */
import Vue from 'vue'
import ElTreeGrid from 'element-tree-grid'
Vue.component(ElTreeGrid.name, ElTreeGrid);

export default {
  data () {
    return {
      catData: [{
        cat_name: '春',
        cat_deleted: false,
        cat_level: '一级'
      }],
      // 是否显示添加分类对话框
      dialogAddCatVisible: false,
      // 添加分类表单 对象
      addCatForm: {
        // 名称
        cat_name: '',
        // 父级名称
        cat_pid_arr: []
      },
      // 级联选择器数据
      /**
       * children : 负责显示结构
       * label : 负责显示标题
       * value : 负责收集
       */
      options1: [{
        value: 'ziyuan',
        label: '资源',
        children: [
          {
            value: 'ha1',
            label: '哈哈1'
          }, {
            value: 'ha2',
            label: '哈哈2'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
      }],
      options: [],
      defaultProps: {
        label: 'cat_name',
        value: 'cat_id'
      }
    }
  },
  created () {

    this.loadCatData()
    this.loadCatData2()
  },
  methods: {
    // 加载分类数据
    async loadCatData () {

      // get(url,config)
      let res = await this.$axios.get('categories', {
        params: {
          type: 3,
          pagenum: 1,
          pagesize: 4
        }
      })

      // console.log(res);
      this.catData = res.data.data.result

    },
    // 加载分类数据
    async loadCatData2 () {
      let res = await this.$axios.get('categories', {
        params: {
          type: 2
        }
      })
      console.log(res);
      this.options = res.data.data

    },
    // 显示添加分类 对话框
    showAddCatDialog () {
      this.dialogAddCatVisible = true
    },
    // 添加分类
    async addCat () {

      //1. 获取已知信息
      let { cat_name, cat_pid_arr } = this.addCatForm

      let res = await this.$axios.post('categories', {
        cat_pid: cat_pid_arr[cat_pid_arr.length - 1],  // 父级名称  数组的最后一个元素
        cat_name,  // 分类名称
        cat_level: cat_pid_arr.length //'0/1/2'
      })

      console.log(res);
      if (res.data.meta.status === 201) {

        //1.关闭对话框
        this.dialogAddCatVisible = false

        //2. 提示
        this.$message({
          message: '添加分类成功',
          type: 'success',
          duration: 800
        })
        //3. 刷新
        this.loadCatData()

      }

    }
  },
}
</script>

<style>
</style>
